<template>
    <div    ref="ganttRef"
            id="gantt_chart1"
            style="min-height: 500px; min-width: 800px"
    ></div>
</template>

<script setup>
import { gantt } from 'dhtmlx-gantt';
import {
    onMounted,
    reactive, ref,
} from 'vue'
const props = defineProps({
    ganttList: {
        type: Array,
        default: () => {
            return [{ start_date: '2020-05-01' }, { start_date: '2020-05-09' }]
        }
    },
    tasks: {
        type: Object,
        default: () => {
            return {
                data: [], // 数据数组
                links: [] // 连接关系
            }
        }
    },
    // 显示列设置
    columns: {
        type: Array,
        default: () => {
            return []
        }
    },
    // 显示单位
    scaleUnit: {
        type: String,
        default: 'day' // “minute”, “hour”, “day”, “week”, “quarter”, “month”, “year”
    },
    // 时间显示格式
    dateScale: {
        type: String,
        default: '%Y-%m-%d'
    }
})
const state = reactive({
    tasks: {
        data: props.ganttList
    }
})

const ganttRef = ref(null);
//初始化
const init = () => {
    // 清空之前的配置
    gantt.clearAll()

    gantt.config.scale_unit = "month"; //按月显示
    gantt.config.date_scale = "%Y-%m"; //设置时间刻度的格式（X轴） 多个尺度
    gantt.config.readonly = true;
    gantt.config.subscales = [{ unit: "day", step: 1, date: "%j日" }]; //指定第二个时间刻度

    gantt.init(ganttRef.value)
    gantt.config.autofit = true;

    // 显示列配置
    gantt.config.columns = props.columns
    gantt.config.layout = {
        css: "gantt_container",
        cols: [
            {
                width: 400,
                min_width: 300,
                rows: [
                    {
                        view: "grid",
                        scrollX: "gridScroll",
                        scrollable: true,
                        scrollY: "scrollVer",
                    },
                    { view: "scrollbar", id: "gridScroll", group: "horizontal" },
                ],
            },
            { resizer: true, width: 1 },
            {
                rows: [
                    { view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer" },
                    { view: "scrollbar", id: "scrollHor", group: "horizontal" },
                ],
            },
            { view: "scrollbar", id: "scrollVer" },
        ],
    };
    gantt.config.tasks = props.tasks;
    gantt.parse(props.tasks);
    gantt.render();
}

onMounted(()=>{
    init();
});
</script>
<style lang="scss" scoped>
@import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';

:deep(.gantt_container) {
    .gantt_task_line {
        border: 0px;
    }
   .gantt_task_line{
       border-radius: 8px !important;
   }
    .gantt_grid_head_cell{
        font-weight: 600 !important;
        color: #333333 !important;
    }
    .gantt_task_progress_wrapper{
        height: auto !important;
    }
}
</style>
